<div class="content-heading">Buttons</div>
<!-- START row-->
<div class="row">
    <div class="col-md-6">
        <!-- START panel-->
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">Button colors</h3>
            </div>
            <div class="panel-body">
                <button class="mb-sm btn btn-default" type="button">Default</button>
                <button class="mb-sm btn btn-primary" type="button">Primary</button>
                <button class="mb-sm btn btn-success" type="button">Success</button>
                <button class="mb-sm btn btn-info" type="button">Info</button>
                <button class="mb-sm btn btn-warning" type="button">Warning</button>
                <button class="mb-sm btn btn-danger" type="button">Danger</button>
                <button class="mb-sm btn btn-inverse" type="button">Inverse</button>
                <button class="mb-sm btn btn-green" type="button">Green</button>
                <button class="mb-sm btn btn-purple" type="button">Purple</button>
                <button class="mb-sm btn btn-pink" type="button">Pink</button>
                <br/>
                <br/><a class="btn btn-link" href="#">Button Link</a>
                <button class="btn btn-default" type="button">
                    <strong>button tag</strong>
                </button>
                <a class="btn btn-default" href="#">
                    <strong>anchor tag</strong>
                </a>
            </div>
        </div>
        <!-- END panel-->
    </div>
    <div class="col-md-6">
        <!-- START panel-->
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">Button Labeled</h3>
            </div>
            <div class="panel-body">
                <!-- Success button with label-->
                <button class="btn btn-labeled btn-success" type="button">
                    <span class="btn-label"><i class="fa fa-check"></i>
               </span>Success</button>
                <!-- Danger button with label-->
                <button class="btn btn-labeled btn-danger" type="button">
                    <span class="btn-label"><i class="fa fa-times"></i>
               </span>Danger</button>
                <!-- Info button with label-->
                <button class="btn btn-labeled btn-info" type="button">
                    <span class="btn-label"><i class="fa fa-exclamation"></i>
               </span>Info</button>
                <!-- Warning button with label-->
                <button class="btn btn-labeled btn-warning" type="button">
                    <span class="btn-label"><i class="fa fa-warning"></i>
               </span>Warning</button>
                <br/>
                <br/>
                <!-- Standard button with label-->
                <button class="btn btn-labeled btn-default" type="button">
                    <span class="btn-label"><i class="fa fa-arrow-left"></i>
               </span>Left</button>
                <!-- Standard button with label on the right side-->
                <button class="btn btn-labeled btn-default" type="button">Right
                    <span class="btn-label btn-label-right"><i class="fa fa-arrow-right"></i>
               </span>
                </button>
            </div>
        </div>
        <!-- END panel-->
    </div>
</div>
<!-- END row-->
<!-- START row-->
<div class="row">
    <div class="col-md-6">
        <!-- START panel-->
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">Button sizing</h3>
            </div>
            <div class="panel-body">
                <div class="row">
                    <div class="col-lg-6">
                        <p>
                            <button class="btn btn-primary btn-lg" type="button">Large button</button>
                            <button class="btn btn-default btn-lg" type="button">Large button</button>
                        </p>
                        <p>
                            <button class="btn btn-primary" type="button">Default button</button>
                            <button class="btn btn-default" type="button">Default button</button>
                        </p>
                    </div>
                    <div class="col-lg-6">
                        <p>
                            <button class="btn btn-primary btn-sm" type="button">Small button</button>
                            <button class="btn btn-default btn-sm" type="button">Small button</button>
                        </p>
                        <p>
                            <button class="btn btn-primary btn-xs" type="button">Extra small button</button>
                            <button class="btn btn-default btn-xs" type="button">Extra small button</button>
                        </p>
                    </div>
                </div>
            </div>
        </div>
        <!-- END panel-->
    </div>
    <div class="col-md-6">
        <!-- START panel-->
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">Button group</h3>
            </div>
            <div class="panel-body">
                <p></p>
                <div class="btn-group">
                    <button class="btn btn-default" type="button">Left</button>
                    <button class="btn btn-default" type="button">Middle</button>
                    <button class="btn btn-default" type="button">Right</button>
                </div>
                <p></p>
                <p></p>
                <div class="btn-group">
                    <button class="btn btn-default" type="button">1</button>
                    <button class="btn btn-default" type="button">2</button>
                    <button class="btn btn-default" type="button">3</button>
                    <button class="btn btn-default" type="button">4</button>
                </div>
                <div class="btn-group">
                    <button class="btn btn-default" type="button">5</button>
                    <button class="btn btn-default" type="button">6</button>
                    <button class="btn btn-default" type="button">7</button>
                </div>
                <div class="btn-group">
                    <button class="btn btn-default" type="button">8</button>
                </div>
            </div>
        </div>
        <!-- END panel-->
    </div>
</div>
<!-- END row-->
<!-- START panel-->
<div class="panel panel-default">
    <div class="panel-heading">
        <h3 class="panel-title">Outline Buttons</h3>
    </div>
    <div class="panel-body">
        <button class="mb-sm btn btn-default btn-outline" type="button">Default</button>
        <button class="mb-sm btn btn-primary btn-outline" type="button">Primary</button>
        <button class="mb-sm btn btn-success btn-outline" type="button">Success</button>
        <button class="mb-sm btn btn-info btn-outline" type="button">Info</button>
        <button class="mb-sm btn btn-warning btn-outline" type="button">Warning</button>
        <button class="mb-sm btn btn-danger btn-outline" type="button">Danger</button>
        <button class="mb-sm btn btn-inverse btn-outline" type="button">Inverse</button>
        <button class="mb-sm btn btn-green btn-outline" type="button">Green</button>
        <button class="mb-sm btn btn-purple btn-outline" type="button">Purple</button>
        <button class="mb-sm btn btn-pink btn-outline" type="button">Pink</button>
        <br/>
        <br/>
        <button class="mb-sm btn-lg btn btn-primary btn-outline" type="button">Outline Large</button>
        <button class="mb-sm btn-sm btn btn-primary btn-outline" type="button">Outline Small</button>
        <button class="mb-sm btn-xs btn btn-primary btn-outline" type="button">Outline xSmall</button>
    </div>
</div>
<!-- END panel-->
<!-- START row-->
<div class="row">
    <div class="col-md-6">
        <!-- START panel-->
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">Button Pills</h3>
            </div>
            <div class="panel-body">
                <p>Pill left</p>
                <p>
                    <button class="btn btn-pill-left btn-default" type="button">Default</button>
                    <button class="btn btn-pill-left btn-primary" type="button">Primary</button>
                    <button class="btn btn-pill-left btn-success" type="button">Success</button>
                    <button class="btn btn-pill-left btn-info" type="button">Info</button>
                    <button class="btn btn-pill-left btn-warning" type="button">Warning</button>
                    <button class="btn btn-pill-left btn-danger" type="button">Danger</button>
                    <button class="btn btn-pill-left btn-inverse" type="button">Inverse</button>
                </p>
                <p>Pill right</p>
                <p>
                    <button class="btn btn-pill-right btn-default" type="button">Default</button>
                    <button class="btn btn-pill-right btn-primary" type="button">Primary</button>
                    <button class="btn btn-pill-right btn-success" type="button">Success</button>
                    <button class="btn btn-pill-right btn-info" type="button">Info</button>
                    <button class="btn btn-pill-right btn-warning" type="button">Warning</button>
                    <button class="btn btn-pill-right btn-danger" type="button">Danger</button>
                    <button class="btn btn-pill-right btn-inverse" type="button">Inverse</button>
                </p>
            </div>
        </div>
        <!-- END panel-->
    </div>
    <div class="col-md-6">
        <!-- START panel-->
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">Button Oval</h3>
            </div>
            <div class="panel-body">
                <button class="btn btn-oval btn-default" type="button">Default</button>
                <button class="btn btn-oval btn-primary" type="button">Primary</button>
                <button class="btn btn-oval btn-success" type="button">Success</button>
                <button class="btn btn-oval btn-info" type="button">Info</button>
                <button class="btn btn-oval btn-warning" type="button">Warning</button>
                <button class="btn btn-oval btn-danger" type="button">Danger</button>
                <button class="btn btn-oval btn-inverse" type="button">Inverse</button>
            </div>
        </div>
        <!-- END panel-->
        <!-- START panel-->
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">Button Square</h3>
            </div>
            <div class="panel-body">
                <button class="btn btn-square btn-default" type="button">Default</button>
                <button class="btn btn-square btn-primary" type="button">Primary</button>
                <button class="btn btn-square btn-success" type="button">Success</button>
                <button class="btn btn-square btn-info" type="button">Info</button>
                <button class="btn btn-square btn-warning" type="button">Warning</button>
                <button class="btn btn-square btn-danger" type="button">Danger</button>
                <button class="btn btn-square btn-inverse" type="button">Inverse</button>
            </div>
        </div>
        <!-- END panel-->
    </div>
</div>
<!-- END row-->
<!-- START row-->
<div class="row">
    <div class="col-md-6">
        <!-- START panel-->
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">Button dropdown</h3>
            </div>
            <div class="panel-body">
                <!-- START button group-->
                <div class="btn-group mb-sm" dropdown>
                    <button class="btn dropdown-toggle btn-default" type="button" dropdownToggle>default
                        <span class="caret"></span>
                    </button>
                    <ul *dropdownMenu class="dropdown-menu" role="menu">
                        <li><a href="#">Action</a>
                        </li>
                        <li><a href="#">Another action</a>
                        </li>
                        <li><a href="#">Something else here</a>
                        </li>
                        <li class="divider"></li>
                        <li><a href="#">Separated link</a>
                        </li>
                    </ul>
                </div>
                <!-- END button group-->
                <!-- START button group-->
                <div class="btn-group mb-sm" dropdown>
                    <button class="btn dropdown-toggle btn-primary" type="button" dropdownToggle>primary
                        <span class="caret"></span>
                    </button>
                    <ul *dropdownMenu class="dropdown-menu" role="menu">
                        <li><a href="#">Action</a>
                        </li>
                        <li><a href="#">Another action</a>
                        </li>
                        <li><a href="#">Something else here</a>
                        </li>
                        <li class="divider"></li>
                        <li><a href="#">Separated link</a>
                        </li>
                    </ul>
                </div>
                <!-- END button group-->
                <!-- START button group-->
                <div class="btn-group mb-sm" dropdown>
                    <button class="btn dropdown-toggle btn-success" type="button" dropdownToggle>success
                        <span class="caret"></span>
                    </button>
                    <ul *dropdownMenu class="dropdown-menu" role="menu">
                        <li><a href="#">Action</a>
                        </li>
                        <li><a href="#">Another action</a>
                        </li>
                        <li><a href="#">Something else here</a>
                        </li>
                        <li class="divider"></li>
                        <li><a href="#">Separated link</a>
                        </li>
                    </ul>
                </div>
                <!-- END button group-->
                <!-- START button group-->
                <div class="btn-group mb-sm" dropdown>
                    <button class="btn dropdown-toggle btn-info" type="button" dropdownToggle>info
                        <span class="caret"></span>
                    </button>
                    <ul *dropdownMenu class="dropdown-menu" role="menu">
                        <li><a href="#">Action</a>
                        </li>
                        <li><a href="#">Another action</a>
                        </li>
                        <li><a href="#">Something else here</a>
                        </li>
                        <li class="divider"></li>
                        <li><a href="#">Separated link</a>
                        </li>
                    </ul>
                </div>
                <!-- END button group-->
                <!-- START button group-->
                <div class="btn-group mb-sm" dropdown>
                    <button class="btn dropdown-toggle btn-warning" type="button" dropdownToggle>warning
                        <span class="caret"></span>
                    </button>
                    <ul *dropdownMenu class="dropdown-menu" role="menu">
                        <li><a href="#">Action</a>
                        </li>
                        <li><a href="#">Another action</a>
                        </li>
                        <li><a href="#">Something else here</a>
                        </li>
                        <li class="divider"></li>
                        <li><a href="#">Separated link</a>
                        </li>
                    </ul>
                </div>
                <!-- END button group-->
                <!-- START button group-->
                <div class="btn-group mb-sm" dropdown>
                    <button class="btn dropdown-toggle btn-danger" type="button" dropdownToggle>danger
                        <span class="caret"></span>
                    </button>
                    <ul *dropdownMenu class="dropdown-menu" role="menu">
                        <li><a href="#">Action</a>
                        </li>
                        <li><a href="#">Another action</a>
                        </li>
                        <li><a href="#">Something else here</a>
                        </li>
                        <li class="divider"></li>
                        <li><a href="#">Separated link</a>
                        </li>
                    </ul>
                </div>
                <!-- END button group-->
                <!-- START button group-->
                <div class="btn-group mb-sm" dropdown>
                    <button class="btn dropdown-toggle btn-inverse" type="button" dropdownToggle>inverse
                        <span class="caret"></span>
                    </button>
                    <ul *dropdownMenu class="dropdown-menu" role="menu">
                        <li><a href="#">Action</a>
                        </li>
                        <li><a href="#">Another action</a>
                        </li>
                        <li><a href="#">Something else here</a>
                        </li>
                        <li class="divider"></li>
                        <li><a href="#">Separated link</a>
                        </li>
                    </ul>
                </div>
                <!-- END button group-->
            </div>
        </div>
        <!-- END panel-->
    </div>
    <div class="col-md-6">
        <!-- START panel-->
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title ellipsis">Split button dropdown</h3>
            </div>
            <div class="panel-body">
                <!-- START button group-->
                <div class="btn-group" dropdown>
                    <button class="btn btn-default" type="button">Action</button>
                    <button class="btn dropdown-toggle btn-default" type="button" dropdownToggle>
                        <span class="caret"></span>
                        <span class="sr-only">default</span>
                    </button>
                    <ul *dropdownMenu class="dropdown-menu" role="menu">
                        <li><a href="#">Action</a>
                        </li>
                        <li><a href="#">Another action</a>
                        </li>
                        <li><a href="#">Something else here</a>
                        </li>
                        <li class="divider"></li>
                        <li><a href="#">Separated link</a>
                        </li>
                    </ul>
                </div>
                <!-- END button group-->
                <!-- START button group-->
                <div class="btn-group" dropdown>
                    <button class="btn btn-primary" type="button">Action</button>
                    <button class="btn dropdown-toggle btn-primary" type="button" dropdownToggle>
                        <span class="caret"></span>
                        <span class="sr-only">primary</span>
                    </button>
                    <ul *dropdownMenu class="dropdown-menu" role="menu">
                        <li><a href="#">Action</a>
                        </li>
                        <li><a href="#">Another action</a>
                        </li>
                        <li><a href="#">Something else here</a>
                        </li>
                        <li class="divider"></li>
                        <li><a href="#">Separated link</a>
                        </li>
                    </ul>
                </div>
                <!-- END button group-->
                <!-- START button group-->
                <div class="btn-group" dropdown>
                    <button class="btn btn-success" type="button">Action</button>
                    <button class="btn dropdown-toggle btn-success" type="button" dropdownToggle>
                        <span class="caret"></span>
                        <span class="sr-only">success</span>
                    </button>
                    <ul *dropdownMenu class="dropdown-menu" role="menu">
                        <li><a href="#">Action</a>
                        </li>
                        <li><a href="#">Another action</a>
                        </li>
                        <li><a href="#">Something else here</a>
                        </li>
                        <li class="divider"></li>
                        <li><a href="#">Separated link</a>
                        </li>
                    </ul>
                </div>
                <!-- END button group-->
                <!-- START button group-->
                <div class="btn-group" dropdown>
                    <button class="btn btn-info" type="button">Action</button>
                    <button class="btn dropdown-toggle btn-info" type="button" dropdownToggle>
                        <span class="caret"></span>
                        <span class="sr-only">info</span>
                    </button>
                    <ul *dropdownMenu class="dropdown-menu" role="menu">
                        <li><a href="#">Action</a>
                        </li>
                        <li><a href="#">Another action</a>
                        </li>
                        <li><a href="#">Something else here</a>
                        </li>
                        <li class="divider"></li>
                        <li><a href="#">Separated link</a>
                        </li>
                    </ul>
                </div>
                <!-- END button group-->
                <!-- START button group-->
                <div class="btn-group" dropdown>
                    <button class="btn btn-warning" type="button">Action</button>
                    <button class="btn dropdown-toggle btn-warning" type="button" dropdownToggle>
                        <span class="caret"></span>
                        <span class="sr-only">warning</span>
                    </button>
                    <ul *dropdownMenu class="dropdown-menu" role="menu">
                        <li><a href="#">Action</a>
                        </li>
                        <li><a href="#">Another action</a>
                        </li>
                        <li><a href="#">Something else here</a>
                        </li>
                        <li class="divider"></li>
                        <li><a href="#">Separated link</a>
                        </li>
                    </ul>
                </div>
                <!-- END button group-->
                <!-- START button group-->
                <div class="btn-group" dropdown>
                    <button class="btn btn-danger" type="button">Action</button>
                    <button class="btn dropdown-toggle btn-danger" type="button" dropdownToggle>
                        <span class="caret"></span>
                        <span class="sr-only">danger</span>
                    </button>
                    <ul *dropdownMenu class="dropdown-menu" role="menu">
                        <li><a href="#">Action</a>
                        </li>
                        <li><a href="#">Another action</a>
                        </li>
                        <li><a href="#">Something else here</a>
                        </li>
                        <li class="divider"></li>
                        <li><a href="#">Separated link</a>
                        </li>
                    </ul>
                </div>
                <!-- END button group-->
                <!-- START button group-->
                <div class="btn-group" dropdown>
                    <button class="btn btn-inverse" type="button">Action</button>
                    <button class="btn dropdown-toggle btn-inverse" type="button" dropdownToggle>
                        <span class="caret"></span>
                        <span class="sr-only">inverse</span>
                    </button>
                    <ul *dropdownMenu class="dropdown-menu" role="menu">
                        <li><a href="#">Action</a>
                        </li>
                        <li><a href="#">Another action</a>
                        </li>
                        <li><a href="#">Something else here</a>
                        </li>
                        <li class="divider"></li>
                        <li><a href="#">Separated link</a>
                        </li>
                    </ul>
                </div>
                <!-- END button group-->
            </div>
        </div>
        <!-- END panel-->
    </div>
</div>
<!-- END row-->
<!-- START panel-->
<div class="panel panel-default">
    <div class="panel-heading">
        <h3 class="panel-title">Button actions</h3>
    </div>
    <div class="panel-body">
        <!-- START row-->
        <div class="row">
            <div class="col-lg-4">
                <h4>Single toggle</h4><pre>{{singleModel}}</pre>
                <button class="btn btn-primary" type="button" [(ngModel)]="singleModel" btnCheckbox>Single Toggle</button>
            </div>
            <div class="col-lg-4">
                <h4>Checkbox</h4>
                <pre>{{checkModel | json}}</pre>
                <div class="btn-group">
                    <label class="btn btn-primary" [(ngModel)]="checkModel.left" btnCheckbox>Left</label>
                    <label class="btn btn-primary" [(ngModel)]="checkModel.middle" btnCheckbox>Middle</label>
                    <label class="btn btn-primary" [(ngModel)]="checkModel.right" btnCheckbox>Right</label>
                </div>
            </div>
            <div class="col-lg-4">
                <h4>Radio &amp; Uncheckable Radio</h4><pre>{{radioModel || 'null'}}</pre>
                <div class="btn-group">
                    <label class="btn btn-primary" [(ngModel)]="radioModel" btnRadio="'Left'">Left</label>
                    <label class="btn btn-primary" [(ngModel)]="radioModel" btnRadio="'Middle'">Middle</label>
                    <label class="btn btn-primary" [(ngModel)]="radioModel" btnRadio="'Right'">Right</label>
                </div>
                <div class="btn-group">
                    <label class="btn btn-success" [(ngModel)]="radioModel" btnRadio="'Left'" uncheckable >Left</label>
                    <label class="btn btn-success" [(ngModel)]="radioModel" btnRadio="'Middle'" uncheckable >Middle</label>
                    <label class="btn btn-success" [(ngModel)]="radioModel" btnRadio="'Right'" uncheckable >Right</label>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- START panel-->
<div class="panel panel-default">
    <div class="panel-heading">
        <h3 class="panel-title">Pagination</h3>
    </div>
    <div class="panel-body">
        <!-- START row-->
        <div class="row">
            <div class="col-lg-6">
                <div>
                    <h4>Default</h4>
                    <pagination [totalItems]="totalItems" [(ngModel)]="currentPage" (pageChanged)="pageChanged($event)"></pagination>
                    <pagination [directionLinks]="false" [totalItems]="totalItems" [(ngModel)]="currentPage" (numPages)="smallnumPages"></pagination>
                    <pre>The selected page no: {{currentPage}}</pre>
                    <button class="btn btn-info" (click)="setPage(3)">Set current page to: 3</button>
                </div>
            </div>
            <div class="col-lg-6">
                <h4>Pager</h4>
                <pager [totalItems]="totalItems" [(ngModel)]="currentPage"></pager>
                <hr/>
                <h4>Limit the maximum visible buttons</h4>
                <pagination class="pagination-sm" [totalItems]="bigTotalItems" [(ngModel)]="bigCurrentPage" [maxSize]="maxSize" [boundaryLinks]="true"></pagination>
                <pagination class="pagination-sm" [totalItems]="bigTotalItems" [(ngModel)]="bigCurrentPage" [maxSize]="maxSize" [boundaryLinks]="true" [rotate]="false" (numPages)="numPages"></pagination>
                <pre>Page: {{bigCurrentPage}} / {{numPages}}</pre>
            </div>
        </div>
        <!-- END row-->
    </div>
</div>
<!-- END panel-->
